<template>
	<view class="card-box" @click="handleToDetail(id)">
		<u-image width="150rpx" height="200rpx" border-radius="12" :src="image" mode="cover" :fade="true" duration="450">
			<u-loading slot="loading"></u-loading>
		</u-image>
		<view class="name u-line-1">{{name}}</view>
		<view class="writer u-line-1">{{writer}}</view>
	</view>
</template>

<script>
	export default {
		name: "Card",
		props: {
			name: String,
			writer: String,
			id: Number,
			image: {
				default: 'http://foglake.sanye666.top/images/default-covor.jpg',
				type: String
			}
		},
		data() {
			return {};
		},
		methods: {
			handleToDetail(id) {
				uni.navigateTo({
				    url: `/pages/detail/detail?id=${id}`
				});
			},
		},
	}
</script>

<style scoped>
	.card-box {
		width: 150rpx;
		margin-bottom: 40rpx;
	}

	.name {
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 600;
		color: rgba(6, 27, 65, 0.75);
		line-height: 24rpx;
		margin-bottom: 10rpx;
		margin-left: 3rpx;
		margin-top: 20rpx;
	}

	.writer {
		font-size: 20rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: rgba(6, 27, 65, 0.35);
		margin-left: 3rpx;
	}
</style>
